<template>
	<view class="content">
		<view class="tools">
			<view class="date-pick">
				<uni-data-select v-model="status" :localdata="searchType" @change="change"></uni-data-select>
			</view>

			<view class="search-bar">
				<button class="search-btn" type="primary" size="mini" @click="search" v-if="status==4">一键退货退款</button>
			</view>
		</view>

		<!-- <uni-card :is-shadow="false" v-for="order in orders" class="order-item" :title="order.tkno"
			:extra="order.orderno">
			<text class="uni-h6">{{order.name}}</text>
			<view slot="actions" class="card-actions">
				<view class="card-actions-item">

					<text class="card-actions-item-text">{{order.price}}</text>
				</view>
				<view class="card-actions-item">
					<text class="card-actions-item-text">{{order.shouxufei}}</text>
				</view>
				<view class="card-actions-item">
					<text class="card-actions-item-text">{{order.money}}</text>
				</view>
				<view class="card-actions-item">
					<text class="card-actions-item-text">{{order.peifu}}</text>
				</view>
			</view>
			<view class="footer">
				<view class="create-time">
					{{order.createtime}}
				</view>
				<view class="status">
					{{order.statusname}}
				</view>
			</view>

		</uni-card> -->
		<view class="total">
			订单总数：{{total}}
		</view>
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->

			<uni-tr>
				<uni-th align="center">序号</uni-th>
				<uni-th align="center">订单号</uni-th>
				<uni-th align="left">Token</uni-th>
				<uni-th align="center" :width="500">商品</uni-th>
				<uni-th align="center">单价</uni-th>
				<uni-th align="left">手续费</uni-th>
				<uni-th align="center">交易金额</uni-th>
				<uni-th align="center">预赔付</uni-th>
				<uni-th align="left">收货地址</uni-th>
				<uni-th align="center">创建时间</uni-th>
				<uni-th align="left">订单状态</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="order in orders">
				<uni-td>{{order.id}}</uni-td>
				<uni-td>{{order.orderno}}</uni-td>
				<uni-td>{{order.tkno}}</uni-td>
				<uni-td>{{order.name}}</uni-td>
				<uni-td>{{order.price}}</uni-td>
				<uni-td>{{order.shouxufei}}</uni-td>
				<uni-td>{{order.money}}</uni-td>
				<uni-td>{{order.peifu}}</uni-td>
				<uni-td>{{order.shrarea}}{{order.shrdizhi}}</uni-td>
				<uni-td>{{order.createtime}}</uni-td>
				<uni-td>{{order.statusname}}</uni-td>
			</uni-tr>


		</uni-table>
		<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="page" :total="total"
				@change="PageChange" /></view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getOrdersAPI,
		plsqtuikuan
	} from '../../apis/order';

	const status = ref('')
	const orders = ref([])
	const total = ref(0)
	const page = ref(1)
	const pageSize = ref(10)
	const searchType = ref([{
		value: '',
		text: '全部'
	}, {
		value: '2',
		text: '待发货'
	}, {
		value: '3',
		text: '已发货'
	}, {
		value: '4',
		text: '已收货'
	}, {
		value: '5',
		text: '申请退款'
	}, {
		value: '6',
		text: '商家收货'
	}, {
		value: '7',
		text: '本金返还'
	}, {
		value: '8',
		text: '运费险返还'
	}])
	const change = (value => {
		status.value = value
		getList({
			status: status.value,
			page: page.value,
			hangshu: pageSize.value
		})
	})
	const search = () => {
		uni.showModal({
			title: '提示',
			content: `是否确认一键退货退款(${total.value})单?`,
			success: async (res) => {
				if (res.confirm) {
					if (total.value == 0) {
						uni.showToast({
							title: '暂无可退货退款的订单',
							icon: 'none'
						})
						return
					}
					let data = await plsqtuikuan()
					// console.log(data);
					if (data.code == 1) {
						uni.showToast({
							title: '退款申请已提交，请耐心等待商家审核',
							icon: 'none'
						})
						getList({
							status: status.value,
							page: page.value,
							hangshu: pageSize.value
						})
					}

				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	onMounted(() => {
		getList({
			status: status.value,
			page: page.value,
			hangshu: pageSize.value
		})
	})
	const getList = (async (params) => {
		const data = await getOrdersAPI(params)
		if (data.code === 1) {
			orders.value = data.data.sqlist
			total.value = data.data.zongshu
		}
	})
	const PageChange = ((e) => {
		page.value = e.current
		getList({
			status: status.value,
			page: page.value,
			hangshu: pageSize.value
		})
	})
</script>

<style lang="scss">
	.content {
		.total {
			padding: 20upx;
		}

		.tools {
			padding: 40upx;
			display: flex;
			justify-content: space-between;

			.date-pick {
				display: flex;
				align-items: center;
				width: 50vw;
			}
		}

		.order-item {

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.card-actions {
				padding-top: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>